<page-header [title]="'告警列表'">
    <nz-card [nzBordered]="false" class>
      <form nz-form class="search__form" action="search">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="CreateDate">警告创建时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [(ngModel)]="q.AckDateTime" [ngModelOptions]="{ standalone: true }"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="CreateDate">清除时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [(ngModel)]="q.ClearDateTime" [ngModelOptions]="{ standalone: true }"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>  <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="CreateDate">警告持续开始时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [(ngModel)]="q.StartDateTime" [ngModelOptions]="{ standalone: true }"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>  
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="EndDateTime">警告结束时间</nz-form-label>
              <nz-form-control>
                <nz-range-picker [(ngModel)]="q.EndDateTime" [ngModelOptions]="{ standalone: true }"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="DeviceName">告警类型</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.AlarmType" placeholder="请输入告警类型"
                  [ngModelOptions]="{ standalone: true }" />
              </nz-form-control>
            </nz-form-item>
          </div>

          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="AlarmStatus">告警状态</nz-form-label>
              <nz-form-control>
                <nz-select  [(ngModel)]="q.alarmStatus" [ngModelOptions]="{ standalone: true }"  > 
                  <nz-option nzValue="-1" nzLabel="全部"></nz-option>
                  <nz-option nzValue="0" nzLabel="激活未应答"></nz-option>
                  <nz-option nzValue="1" nzLabel="激活已应答"></nz-option>
                  <nz-option nzValue="2" nzLabel="清除未应答" ></nz-option>
                  <nz-option nzValue="3" nzLabel="清除已应答" ></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="Serverity">告警级别</nz-form-label>
              <nz-form-control>
                <nz-select  [(ngModel)]="q.serverity" [ngModelOptions]="{ standalone: true }" > 
                  <nz-option nzValue="-1" nzLabel="全部"></nz-option>
                  <nz-option nzValue="0" nzLabel="不确定"></nz-option>
                  <nz-option nzValue="1" nzLabel="警告"></nz-option>
                  <nz-option nzValue="2" nzLabel="次要" ></nz-option>
                  <nz-option nzValue="3" nzLabel="重要" ></nz-option>
                  <nz-option nzValue="4" nzLabel="错误" ></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="OriginatorType">起因来源</nz-form-label>
              <nz-form-control>
                <nz-select  [(ngModel)]="q.originatorType" (ngModelChange)="onOriginatorTypeChange($event)" [ngModelOptions]="{ standalone: true }" > 
                  <nz-option nzValue="-1" nzLabel="全部"></nz-option>
                  <nz-option nzValue="0" nzLabel="未知"></nz-option>
                  <nz-option nzValue="1" nzLabel="设备"></nz-option>
                  <nz-option nzValue="2" nzLabel="网关" ></nz-option>
                  <nz-option nzValue="3" nzLabel="资产" ></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="DeviceName">起因对象</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.OriginatorName" (input)="onOriginatorInput($event)" (ngModelChange)="onOriginatorChange($event)" name="Originator" placeholder="请输入"  [nzAutocomplete]="auto"/>
                <input type="hidden" [(ngModel)]="q.OriginatorId"  name="OriginatorId" placeholder="请输入"  />
                <nz-autocomplete #auto>
                  <nz-auto-option *ngFor="let option of originators" [nzValue]="option.name">{{ option.name }}</nz-auto-option>
                </nz-autocomplete>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="24" [class.text-right]="expandForm" style="text-align: right">
            <button nz-button type="submit" [nzType]="'primary'" (click)="getData()">搜索</button>
            <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
            <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
          </div>
        </div>
      </form>
  
      <!-- <button nz-button [nzType]="'primary'" (click)="openComponent(-1)" acl [acl-ability]="59">
        <i nz-icon nzType="plus"></i>
        <span>{{ 'button.new' | i18n }}</span>
      </button> -->
      <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/authority/roleform']" [queryParams]="{Id:-1}">
            <i nz-icon nzType="plus"></i>
            <span>{{ 'button.new' | translate }}</span>
          </button>-->
  
      <st
        #st
        [columns]="columns"
        [data]="url"
        ps="20"
        [page]="page"
        [req]="req"
        [res]="res"
        [expand]="expand"
        expandRowByClick
        expandAccordion
     
      >
        <ng-template #expand let-item let-index="index" let-column="column">
          <nz-card nzTitle="告警详情">
            {{item.alarmDetail}}
          </nz-card>

          <nz-card nzTitle="起因对象">
            <sv-container col="2">
              <sv label="id" type="primary">  {{item?.originator?.id}}</sv>
              <sv label="名称" type="success">  {{item?.originator?.name}}</sv>
            </sv-container>
          </nz-card>


          
        </ng-template>
      </st>
    </nz-card>
    <ng-template #modalContent>
      <nz-form-item>
        <nz-form-label nzFor="no">描述</nz-form-label>
        <nz-form-control>
          <input nz-input [(ngModel)]="description" name="description" placeholder="请输入" id="no" />
        </nz-form-control>
      </nz-form-item>
    </ng-template>
  </page-header>
